<template>
    <div>
        <Editor ref="editor"/>
        <!-- <WangEditor :form="form"/> -->
        <FloatButton :publicName="publicName" @goBack="goBack" @save="save"/>
    </div>
</template>

<script>
import Editor from '@/views/editor/components/initEditor.vue';
import FloatButton from './components/FloatButton.vue';
import WangEditor from './components/WangEditor.vue';
import { getFolderId,fileUpload } from '@/api/api'
export default {
    name: 'createNewArticle',
    data() {
        return {
            content:'',
            publicName:'发布'
        }
    },
    components:{Editor,FloatButton,WangEditor},
    mounted(){
        // 配置文件上传
        this.$refs.editor.setUploadConfig(this.uploadFile);
        this.$refs.editor.setVideoUploadCommands(this.uploadFile);
        setTimeout(()=>{
            this.setContent();
        },1000)
    },
    methods: {
        // 返回
        goBack() {
            this.$router.push('/Main/articleManage');
            // this.$emit('goBack');
        },

        // 刷新和关闭拦截处理
        handleBeforeUnload(event) {  
            // 在事件处理程序中添加保存提示的逻辑  
            event.preventDefault();  
            event.returnValue = '您确定要离开吗？请确认是否保存您的更改。';
        },

        // 保存
        save(){
            this.setContent();
            this.$message.success('保存成功');
        },

        // content赋值
        setContent(){
            const { html, css } = this.$refs.editor.getHTMLText();
            const tmpl =
                `<!DOCTYPE html>
                <html>
                    <head><meta charset="UTF-8"></head>
                    ${html}
                    <style>
                        ${css}
                    </style>
                </html>`;
            this.content = tmpl;
            this.$store.commit("setArticleHTML", this.content);
        },

        // 上传文件
        async uploadFile(file){
            const filderId = await this.getFolderId();
            const formData = new FormData();
            formData.append('file',file);
            formData.append('folderId',filderId);
            formData.append('isCover',"0");
            // 下面返回上传路径
            return await fileUpload(formData).then(resp => {
                if(resp.data.code == 200){
                    return resp.data.result.src;
                }else{throw new Error('上传失败');}
            }).catch(e => {throw new Error('处理失败');})
        },

        // 获取文件夹id
        async getFolderId(){
            return await getFolderId({
                folderName: "官网",
                folderDescribe: "官网目录自动创建",
                folderAttributes: '{"dataType":0}',
            }).then(resp => {
                if(resp.data.code == 200){
                return resp.data.result;
                }else{this.$message.error('文件夹路径获取失败！')}
            }).catch(e => {this.$message.error('处理失败！')})
        },
    },
    beforeRouteEnter(to, from, next) {
        next(vm => {
            vm.publicName = vm.$route.params.public?'取消发布':'发布';
        })
    },
    beforeRouteLeave(to, from, next) {
        const { html, css } = this.$refs.editor.getHTMLText();
        const tmpl =`<!DOCTYPE html><html><head><meta charset="UTF-8"></head>${html}<style>${css}</style></html>`;
        if(this.content.replace(/\s*/g,"")!=tmpl.replace(/\s*/g,"")){
            const answer = window.confirm('您所做的更改可能未保存', "离开", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                confirmButtonClass: 'btnTrues',
                type: "warning",
            })
            next(answer);
        }else{next();}
        window.removeEventListener('beforeunload', this.handleBeforeUnload); 
    },
    beforeMount() {  
        window.addEventListener('beforeunload', this.handleBeforeUnload);  
    },  
    beforeDestroy() {  
        window.removeEventListener('beforeunload', this.handleBeforeUnload); 
    }, 
}
</script>

<style lang="scss" scoped>
</style>
